<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini"  onload="checkBrowser()">
<!--标记面板-->
<div class="modal fade" id="modal-mark-panel">
    <div class="modal-dialog" style="width: 500px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">项目划库存标记</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header" style="padding-bottom: 0px;">

                            </div>
                            <div class="box-body">
                                <form id="modalForm" class="form-horizontal">
                                    <div class="row">
                                        <input type="hidden" name="pimBeforeItyId">
                                        <input type="hidden" name="pimItyType">
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">项目编号</label>
                                            <label>
                                                <input type="text" id="pimBeforeProCode" name="pimBeforeProCode"
                                                       class="form-control"
                                                       readonly="readonly" style="width: 350px"/>
                                            </label>
                                        </div>
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">项目名称</label>
                                            <label>
                                                <input type="text" id="pimBeforeProName" name="pimBeforeProName"
                                                       class="form-control"
                                                       readonly="readonly" style="width: 350px"/>
                                            </label>
                                        </div>
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">SAP物料编码</label>
                                            <label>
                                                <input type="text" id="pimSapCode" name="pimSapCode"
                                                       class="form-control" readonly="readonly" style="width: 350px"/>
                                            </label>
                                        </div>
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">
                                                物料描述
                                            </label>
                                            <label>
                                                <input type="text" id="pimMatDesc" name="pimMatDesc"
                                                       class="form-control" readonly="readonly" style="width: 350px"/>
                                            </label>
                                        </div>
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">可用数量</label>
                                            <label>
                                                <input type="text" id="pimBeforeAvaNum" name="pimBeforeAvaNum"
                                                       class="form-control"
                                                       readonly="readonly" style="width: 350px"/>
                                            </label>
                                        </div>
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">
                                                标记数量
                                            </label>
                                            <label>
                                                <input type="text" id="pimNum" name="pimNum"
                                                       class="form-control"
                                                       placeholder="请输入标记数量" oninput="xyh.inputDecimalThree(this)"
                                                       style="width: 350px">
                                            </label>
                                        </div>
                                        <div class="form-group" style="height: 60px">
                                            <label style="width: 90px;text-align: right">
                                                划拨说明
                                            </label>
                                            <label>
                                                <input type="text" id="pimRemark" name="pimRemark"
                                                       class="form-control"
                                                       placeholder="请输入划拨说明"
                                                       style="width: 350px">
                                            </label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-info" id="btn-mark-commit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<section class="content-header">
    <h1 style="display: inline-block" id="title">项目划库存申请</h1>
    <button onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="form-inline">
                            <form id="queryForm">
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        物料描述
                                    </label>
                                    <label class="control-label">
                                        <input name="ityMatDesc" type="text" class="form-control text" maxlength="255"
                                               placeholder="请输入物料描述" style="width: 150px"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        SAP物料编码
                                    </label>
                                    <label class="control-label">
                                        <input name="itySapCode" type="text" class="form-control text"
                                               placeholder="请输入SAP物料编码" style="width: 150px"/>
                                    </label>
                                </div>

                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        项目编号
                                    </label>
                                    <label class="control-label">
                                        <input name="ityProCode" type="text" class="form-control text" maxlength="255"
                                               placeholder="请输入项目编号" style="width: 150px"/>
                                    </label>
                                </div>
                                <div class="form-group " style="margin-right: 10px;margin-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        项目名称
                                    </label>
                                    <label class="control-label">
                                        <input name="ityProName" type="text" class="form-control text" maxlength="255"
                                               placeholder="请输入项目名称" style="width: 150px"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        剩余金额小于
                                    </label>
                                    <label class="control-label">
                                        <input name="totalAmount" type="text" class="form-control text" maxlength="255"
                                               placeholder="请输入金额" oninput="xyh.inputDecimalThree(this)"
                                               style="width: 100px"/>
                                    </label>
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        生产状态
                                    </label>
                                    <label class="control-label">
                                        <select name="ityProStatus" class="form-control select"  style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 100px!important;">
                                            <option value="" selected="selected">全部</option>
                                            <option value="-1">无状态</option>
                                            <option value="1">未开始</option>
                                            <option value="2">执行中</option>
                                            <option value="3">已完成</option>
                                            <option value="4">取消</option>
                                            <option value="5">暂缓</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        仓库
                                    </label>
                                    <label class="control-label">
                                        <select name="ityWhiId" class="form-control select"
                                                style="padding: 0px!important;text-align: center!important;text-align-last: center!important;">

                                        </select>
                                    </label>
                                </div>
                                <div class="form-group"
                                     style="margin-right: 10px;margin-bottom: 5px">
                                    <button type="button" class="btn btn-success" id="btn-search">搜索
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="row" id="toolbar">
                    <button shiro:hasPermission="purinv:purprowar:edit" id="btn_markInventorys" type="button" class="btn btn-info">
                        批量标记
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" class="table table-bordered " width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;

    function checkBrowserFun() {
        let is360 = false;
        let isIE = false;
        let isFirefox = false;
        let isChrome = false;
        let isEdge = false;
        let broName = 'Runing';
        let str = '';
        let strStart = 0;
        let strStop = 0;
        let arr = new Array();
        let temp = '';
        let userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform
        /*alert(userAgent);*/
        //FireFox
        if (userAgent.indexOf('Firefox') != -1) {
            isFireFox = true;
            /*broName = 'FireFox浏览器';*/
            strStart = userAgent.indexOf('Firefox');
            temp = userAgent.substring(strStart);
            broName = temp.replace('/', '版本号')

        }
        //Edge
        if (userAgent.indexOf('Edge') != -1) {
            isEdge = true;
            /*broName = 'Edge浏览器';*/
            strStart = userAgent.indexOf('Edge');
            temp = userAgent.substring(strStart);
            broName = temp.replace('/', '版本号');
        }
        //IE浏览器
        if (userAgent.indexOf('NET') != -1 && userAgent.indexOf("rv") != -1) {
            isIE = true;
            /*broName = 'IE浏览器'; */
            strStart = userAgent.indexOf('rv');
            strStop = userAgent.indexOf(')');
            temp = userAgent.substring(strStart, strStop);
            broName = temp.replace('rv', 'IE').replace(':', '版本号');
        }
        //360极速模式可以区分360安全浏览器和360极速浏览器
        if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") < 0 && userAgent.indexOf("Firefox") < 0) {
            if (navigator.javaEnabled()) {
                is360 = true;
                broName = '360安全浏览器-极速模式';
            } else {
                is360 = true;
                broName = '360极速浏览器-极速模式';
            }
        }
        //360兼容
        if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") != -1 && userAgent.indexOf("MSIE") != -1 && userAgent.indexOf("rv") < 0) {
            is360 = true;
            broName = '360兼容模式';
        }
        //Chrome浏览器
        if (userAgent.indexOf('WOW') < 0 && userAgent.indexOf('Chrome') > 0 && userAgent.indexOf("Edg") < 0) {
            isChrome = true;
            /*broName = 'Chrome浏览器';*/
            strStart = userAgent.indexOf('Chrome');
            strStop = userAgent.indexOf(' Safari');
            temp = userAgent.substring(strStart, strStop);
            broName = temp.replace('/', '版本号');
        }
        return isChrome;
    }

    /**
     * 检测浏览器
     * */
    function checkBrowser(){
        if(!checkBrowserFun()){
            alert("尊敬的客户，您使用浏览器不是谷歌浏览器，请使用谷歌浏览器访问本系统！");
            location.href=ctx+"overview/index";
        }
    }

    /**
     *@FunctionName: showMarkPanel
     *@Description: 显示标记模态框
     *@Author: 徐一贺
     *@CreateDate: 2020/5/8 9:25
     *@Phone: 18241927380
     *@Param: [ityId] 库存表主键 [ityType] [库存类型]
     *@Version: 1.0.0
     */
    function showMarkPanel(ityId, ityType) {
        $.post(ctx + 'purchase/proInv/apply/getInventory', {
            pimBeforeItyId: ityId,
            pimItyType: ityType
        }, function (result) {
            if (result.type == web_status.SUCCESS) {
                $("#modalForm").fillData(result.data);
                js.table.refresh(table);
                js.modal.open("modal-mark-panel");
            } else if (result.type == web_status.FAIL) {
                js.modal.fail(result.msg);
            }
        }, 'json');
        js.modal.open();
    }


    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: 徐一贺
     *@CreateDate: 2020/4/10 16:10
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function search() {
        js.table.search(table);
    }

    /**
     *@FunctionName: selectAll
     *@Description: 全选
     *@Author: 徐一贺
     *@CreateDate: 2020/4/8 15:20
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function selectAll(obj) {
        $('input[name="cb_change"]').each(function () {
            if (!$(this).prop("disabled")) {
                if ($(obj).prop("checked")) {
                    $(this).prop("checked", true);
                }
                if ($(obj).prop("checked") == false) {
                    $(this).prop("checked", false);
                }
            }
        })

    }
    /**
     *@FunctionName: findWarehouseList
     *@Description: 获取仓库列表
     *@DesignIdea: 因为此页面是外购件页面，所以获取外购件仓库列表。
     *@Author: 徐一贺
     *@CreateDate: 2020/5/9 16:10
     *@Phone: 18241927380
     *@Param: []
     *@Version: v 1.0.0
     */
    function findWarehouseList() {
        js.ajax({
            url: ctx + 'common/warehouseInfo/list',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {},
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {

                    $("#queryForm [name='ityWhiId']").empty();
                    $("#queryForm [name='ityWhiId']").append('<option selected="selected" style="vertical-align: middle;text-align: center" value="">全部</option>');
                    for (var i = 0; i < result.data.rows.length; i++) {
                        $("#queryForm [name='ityWhiId']").append('<option style="vertical-align: middle;text-align: center" value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                    }
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        })
    }

    $(function () {
        $("title").html($("title").html()+" —— 项目划库存标记");
        findWarehouseList();
        //加载列表数据
        table = js.table.init({
            id: 'bootstrap-table',
            url: ctx + "purchase/proInv/apply/invList",
            showColumns: true,
            showExport: false,
            pageSize: 300,
            striped: false,
            uniqueId: "ityId",
            onLoadSuccess: function () {
                $('#btn-search').prop('disabled', false).removeClass('disabled');
                $('#inventoryQueryTable thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#inventoryQueryTable tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: [
                {
                    title: '<input style="width: 16px;height: 16px" title="全选" id="selectAll" onclick="selectAll(this)" type="checkbox" />',
                    width: '30',
                    field: 'ityId',
                    formatter: function (value, row, index) {
                        return '<input  style="width: 16px;height: 16px"  id="cb_change' + row.ityId + '" name="cb_change" data="' + row.ityId + '" data-type="' + row.ityType + '"  type="checkbox" />';
                    }
                },
                {
                    title: '序号', field: 'pimId', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '生产状态', field: 'ityProStatus'},
                {title: '项目剩余总金额<BR>（万元）', field: 'totalAmount', formatter: function (value, row, index) {
                        if(hasP('purinv:amount:view')){
                            if(value==undefined || value == null){
                                return "--";
                            }
                            return value;
                        }
                        return '***';
                    }},
                {title: '物料描述', field: 'ityMatDesc'},
                {title: 'SAP物料编码', field: 'itySapCode'},
                {title: '可用数量', field: 'ityAvaNum'},
                {title: '单位', field: 'ityNumUnit',width:'50'},
                {title: '项目编号', field: 'ityProCode', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }},
                {title: '项目名称', field: 'ityProName', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }},
                // {
                //     title: '仓库类型', field: 'ityType', formatter: function (value, row, index) {
                //         if (value == 'h') {
                //             return '成品库';
                //         } else if (value == 'p') {
                //             return '外购件库';
                //         } else if (value == 'm') {
                //             return '原料库';
                //         }
                //     }
                // },
                {
                    title: '仓库', field: 'ityWhiName'
                },
                {
                    title: '操作', field: 'ityId',width:'80',
                    formatter: function (value, row, index) {
                        if(hasP("purinv:purprowar:edit")){
                            var htmlText = '<button class="btn btn-info btn-xs" onclick="showMarkPanel(' + row.ityId + ',\'' + row.ityType + '\')">标记</button>';
                            return htmlText;
                        }
                        return "";
                    }
                }
            ]
        });
        /**
         * 表格搜索
         */
        $("#btn-search").on('click', function () {
            $('#btn-search').prop('disabled', true).addClass('disabled');
            js.table.search(table);
        });

        /**
         * 标记
         * */
        $("#btn-mark-commit").on('click', function () {
            js.submit({
                url: ctx + "purchase/proInv/apply/mark",
                data:
                    new FormData($("#modalForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-mark-panel");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        });

        /**
         * 批量标记
         */
        $("#btn_markInventorys").on('click', function () {
            var ityObjArr = new Array();
            $('input[name="cb_change"]').each(function () {
                if (!$(this).prop("disabled")) {
                    if ($(this).prop("checked")) {
                        var ityObj = {
                            pimBeforeItyId: $(this).attr("data"),
                            pimItyType: $(this).attr("data-type")
                        };
                        ityObjArr.push(ityObj);
                    }
                }
            })
            if (ityObjArr.length == 0) {
                js.modal.warning("请选择要批量标记的库存!");
            }
            js.modal.confirm("您确认要标记这些库存吗？", function () {
                js.post({
                    url:ctx + 'purchase/proInv/apply/marks',
                    data:JSON.stringify(ityObjArr),
                    type:"post",
                    cache:false,
                    dataType: "json",
                    contentType:"application/json",
                    crossDomain: true == !(document.all),
                    success: function(res) {
                        if(res.type==web_status.SUCCESS){
                            js.modal.success(res.msg);
                            js.table.refresh(table);
                            js.modal.closeLoading();
                        }else {
                            js.modal.warning(res.msg);
                            js.modal.closeLoading();
                        }
                    }
                });
            });
        });

        // 验证初始化
        js.validate.init("modalForm", {
            fields: {
                pimNum: {
                    validators: {
                        notEmpty: {message: '请输入标记数量'},
                    }
                },
                pimRemark: {validators: {notEmpty: {message: '请输入划拨说明'}}},
            }
        });
    });
</script>
</body>
</html>
